<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import articleEdit from './components/StudentStart.vue'
// 引入userStore
import { useUserStore } from '@/stores/index'
//导入弹窗组件渲染
import { SelectStudentBySchoolId } from '@/api/proofsta'

const loding = ref(false)
// 定义接收子组件数据的变量
const studentstartlList = ref([])
const studenLit = ref([])

// 定义分页查询的数据参数对象
const params = ref({
  pageNum: 1, //当前页
  pageSize: 3, //每页的数据
  categoryId: null, //分类id
  state: '0', //审核状态
})

//重置按钮
const onReset = () => {
  params.value.state = '0'
}
//查询按钮
const onSearch = (t) => {
  //判断集合是否为null
  if (studenLit.value == null) {
    return
  }
  console.log(params.value.state)
  // 根据条件过滤userProofStart字段数字相同的
  studentstartlList.value = studenLit.value.filter((item) => {
    return item.userProofStart == params.value.state
  })
}
const articleEditRef = ref()
//更新审核状态
const updateProofStart = async (data) => {
  // 打开侧边抽屉
  // 修改的话直接调用组件的方法,传递参数表示修改
  articleEditRef.value.open(data)
}

//获取获取学生审核状态
const getStudentStartlList = async () => {
  // 从本地获取用户登录信息
  // 正确调用 useUserStore 获取 store 实例
  const userStore = useUserStore()
  const user = await userStore.getUser().then((res) => {
    return res
  })
  let id = user.schoolCode
  loding.value = true
  console.log(user)
  isDefaultPassword(user.isDefPassword)
  const res = await SelectStudentBySchoolId(id)
  console.log(res)

  studenLit.value = res.data.data.data
  onSearch()
  console.log(studentstartlList.value)
  loding.value = false
}
//页面加载完之后执行
onMounted(() => {
  getStudentStartlList()
})

//判断是否是默认密码
const isDefaultPassword = (b) => {
  if (b === '1') {
    //弹出对话框修改密码
    ElMessageBox({
      title: '修改密码',
      message: '请先修改密码',
      type: 'warning',
    })
      .then(() => {
        // 点击确定后的操作
        //跳转个人页面修改密码
        window.location.href = '/user/password'
      })
      .catch(() => {
        // 点击取消后的操作
      })
  }
}
</script>

<template>
  <!-- 导入对应的vue组件然后渲染到页面 -->
  <page-container title="学生审核管理">
    <template #extra> </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="审核状态" style="width: 300px">
        <el-select v-model="params.state"
          ><!--label展示给用户看  value提交的数据-->
          <el-option label="待审核" value="0"></el-option>
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="未通过" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSearch('c')"
          >查询</el-button
        >
        <el-button type="primary" size="small" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <!-- 表格组件 -->
    <el-table :data="studentstartlList" style="width: 100%" v-loading="loding">
      <el-table-column type="index" label="序号" width="100" />
      <!-- <el-table-column prop="" label=" 序号" style="width: 100%" /> -->
      <el-table-column prop="major" label="专业" />
      <!-- //审核状态如果是1就是通过审核,2表示未通过审核0表示待审核 -->
      <el-table-column prop="userProofStart" label="审核状态">
        <template #default="scope">
          <!-- 根据 userProofStart 的值显示对应的审核状态文字 -->
          <span v-if="scope.row.userProofStart === 0">待审核</span>
          <span v-if="scope.row.userProofStart === 1">审核通过</span>
          <span v-if="scope.row.userProofStart === 2">未通过</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="" label="操作" style="width: 100%">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="updateProofStart(scope)"
          />
          <!-- <el-button type="danger" :icon="Delete" @click="onDeleteChannel(scope)" circle /> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <!-- <el-pagination v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
      :page-sizes="[3, 5, 10, 13]" :small="small" :disabled="disabled" :background="background"
      layout=" sizes, prev, pager, next, jumper, total" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" style="margin: 20px; justify-content: flex-end" /> -->

    <!-- 抽屉组件 监听子组件的list -->
    <article-edit ref="articleEditRef" @getList="onSearch"></article-edit>
  </page-container>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 可以根据实际情况调整高度 */
}

.article-list {
  flex: 1;
  overflow-y: auto;
  /* 当内容超出时显示滚动条 */
}

.pagination {
  flex-shrink: 0;
  /* 防止分页组件被压缩 */
}
</style>
